<template>
    <div class="vue-box">
      <div class="c-panel">
        <el-row>
          <!--模糊查询-->
          <el-form :inline="true" size="small">
                <el-form-item label="角色名称：">
                  <el-input type="text" size="small" v-model="query.roleName" placeholder="模糊查询"></el-input>
                </el-form-item>
                <el-form-item label="角色标识：">
                  <el-input type="text" size="small" v-model="query.roleCode" placeholder="模糊查询"></el-input>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select size="small" v-model="query.status" placeholder="请选择" clearable>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
                <br/>
                <el-form-item label="注册日期：">
                    <el-date-picker type="date" size="small" v-model="query.startTime" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker> -
                    <el-date-picker type="date" size="small" v-model="query.endTime" value-format="yyyy-MM-dd" placeholder="结束日期"></el-date-picker>
                  </el-form-item>
                <el-form-item>
                  <el-button style="min-width: 0px;" type="primary" icon="el-icon-search" @click="f5('screen')">查询</el-button>
                </el-form-item>
          </el-form>
          <!--全局功能按钮-->
          <el-row>
              <el-col :span="1.5" class="firstBtn">
                <el-button size="small" type="success" icon="el-icon-plus" plain @click="add('')">新增</el-button>
              </el-col>
              <el-col :span="1.5" class="btn">
                <el-button size="small" type="danger" icon="el-icon-delete" plain @click="del('batch')">删除</el-button>
              </el-col>
              <el-col :span="1.5" class="btn">
                <el-button size="small" type="primary" icon="el-icon-refresh-left" plain @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="1.5" class="btn">
                <el-button size="small" type="info" icon="el-icon-refresh" plain @click="f5()">重置</el-button>
              </el-col>
          </el-row>
          <!--组织列表-->
          <el-table
            :data="tableData" style="width: 100%" row-key="id" ref="table" v-loading="state.loading" 
            @selection-change="handleSelectionChange" :default-sort ="{prop:'orderNum',order:'ascending'}">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column prop="roleName" label="角色名称" width="160">
            </el-table-column>
            <el-table-column prop="roleCode" label="角色标识" width="150">
            </el-table-column>
            <el-table-column prop="orderNum"  sortable label="显示顺序" width="120">
            </el-table-column>
            <el-table-column label="状态" prop="tag" width="100">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status === '启用' ? 'primary' : 'info'"
                  disable-transitions>{{scope.row.status}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180" align="center">
            </el-table-column>
              <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="primary"
                  @click="edit(scope.row)"><i class="el-icon-edit el-icon--left"></i>修改</el-button>
                <el-button
                  size="mini" type="danger"
                  @click="state.delDialogVisible=true,info=scope.row,openWarning('注意：此操作会导致对应用户失去该角色权限!')"><i class="el-icon-delete el-icon--left"></i>删除</el-button>
                  <el-button
                  size="mini" type="success"
                  @click="assign(scope.row)"><i class="el-icon-user-solid  el-icon--left"></i>分配用户</el-button>
                  <el-button
                  size="mini" type="success"
                  @click="cancel(scope.row)"><i class="el-icon-user-solid  el-icon--left"></i>用户管理</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--对话框相关-->
          <el-dialog title="角色信息" :modal-append-to-body='false' top='5vh' v-if="state.dialogVisible"
          :visible.sync="state.dialogVisible">
              <role-info :role="JSON.stringify(info)" :displayType="state.displayType"></role-info>
          </el-dialog>
          <el-dialog title="角色用户信息" :modal-append-to-body='false' top='5vh' v-if="state.userDialogVisible"  width="55%"
          :visible.sync="state.userDialogVisible">
              <role-user :roleid="info.id" :displayType="state.displayType"></role-user>
          </el-dialog>
          <el-dialog title="删除提示" :visible.sync="state.delDialogVisible" :modal-append-to-body='false' 
          width="30%" :before-close="handleClose">
                <span >确定删除该部门？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="del()">确 定</el-button>
                  <el-button @click="state.delDialogVisible=false">取 消</el-button>
                </span>
          </el-dialog>
          <!-- 分页 -->
          <div class="page-box">
            <el-pagination background
              layout="total, prev, pager, next, sizes, jumper" 
              :current-page.sync="query.pageNo" 
              :page-size.sync="query.pageSize" 
              :total="dataCount" 
              :page-sizes="[1, 10, 20, 30, 40, 50, 100]" 
              @current-change="f5()" 
              @size-change="f5()">
            </el-pagination>
          </div>
        </el-row>

      </div>
    </div>
</template>

<script>
import roleInfo from './role-info.vue'
import roleUser from './role-user.vue'
export default {
  components:{roleInfo,roleUser},
  data(){
    return{
      query:{
        pageNo:1,
        pageSize:10,
        roleName:'',
        roleCode:'',
        status:'',
        startTime: '',
        endTime:''
      },
      tableData:[],
      info:{},
      multipleSelection:[],
      dataCount:0,
      state:{
        loading:true,
        dialogVisible:false,
        userDialogVisible:false,
        delDialogVisible:false,
        displayType:''
      }
    }
  },
  methods:{
    //刷新
    f5(type){
      let params=type==='screen'?this.query: {pageNo: 1,pageSize: 10};
      console.log(params);
      this.state.loading=true
      this.request('/api/role/getRoleList',params).then(res=>{
        if(!res){return}
        //console.log(res);
        res.data.records.forEach(element => {
          element=this.sa.displaceStrStatus(element)
        });
        if(type!=='screen'){
          this.query={pageNo:this.query.pageNo,pageSize:this.query.pageSize,roleName:'',roleCode:'',status:'',startTime: '',endTime:''}
        }
        this.tableData=res.data.records
        this.dataCount=res.dataCount
        this.state.loading=false
      })
    },
    //删除
    del(type){
      this.state.loading=true;
      let params=[];
      //批量还是单一的判断
      if(type=="batch"){
        params=this.multipleSelection
      }else{
        params.push(this.info)
      }
      if(params.length==0){
        this.$message.warning("您暂未进行选择！")
        this.state.loading=false
        return
      }
      this.requestJson('/api/role/batchDel',params,{'Content-Type': 'application/json'}).then(res=>{
        if(!res){return}
        //刷新用户权限信息
        this.$bus.$emit('refUserPerm')
        this.state.delDialogVisible=false;
        this.f5()
      })
      this.state.loading=false
    },
    //修改
    edit(data){
      if(this.zm.checkAuth('role:update')){
        this.info=data
        this.state.displayType='edit'
        this.state.dialogVisible=true
      }else{
        this.$message.error("您暂无<修改角色>权限！")
      }
      
    },
    //修改回调
    updateCallBack(){
      this.state.dialogVisible=false;
      //刷新用户权限信息
      this.$bus.$emit('refUserPerm')
      this.$message.success("修改角色成功！")
      this.f5();
    },
    //新增
    add(){
      if(this.zm.checkAuth('role:add')){
        this.state.displayType='add'
        this.state.dialogVisible=true
      }else{
        this.$message.error("您暂无<新增角色>权限！")
      }
      
    },
    //新增回调
    addCallBack(){
      this.state.dialogVisible=false;
      //刷新用户权限信息
      this.$bus.$emit('refUserPerm')
      this.$message.success("新增角色成功！")
      this.f5();
    },
    //分配用户
    assign(data){
      if(this.zm.checkAuth('role:assign')){
        this.info=data
        this.state.displayType='assign'
        this.state.userDialogVisible=true
      }else{
        this.$message.error("您暂无<分配用户>权限！")
      }      
    },
    //管理角色用户
    cancel(data){
      if(this.zm.checkAuth('role:cancel')){
        this.info=data
        this.state.displayType='cancel'
        this.state.userDialogVisible=true
      }else{
        this.$message.error("您暂无<管理角色用户>权限！")
      }
    },
    //列表行选择
    handleSelectionChange(val){
      this.multipleSelection=val;
    },
    //取消当前的选择
    toggleSelection(){
      if(this.multipleSelection.length==0){
        this.$message.warning("您暂未进行选择");
        return
      }
      this.$refs.table.clearSelection();
    },
    //弹出警告提示框，参数为警告信息
    openWarning(msg) {
      this.$notify({
        title: '警告',
        message: msg,
        type: 'warning'
      });
    },
    //对话框取消
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
        done();
        })
        .catch(_ => {});
    }
  },
  mounted(){
    this.f5()
    //取消修改的回调绑定
    this.$bus.$on("noUpdate",()=>{
      this.state.dialogVisible=false
    })
    this.$bus.$on("updateRoleCallBack",this.updateCallBack)
    this.$bus.$on("addRoleCallBack",this.addCallBack)
  },
  beforeDestroy(){
    this.$bus.$off(['updateRoleCallBack','addRoleCallBack','noUpdate'])
  }
}
</script>

<style scoped>
/**模糊查询样式*/
.el-form-item--small /deep/ .el-form-item__content, /deep/ .el-form-item--small .el-form-item__label  {
	font-size:14px;
	font-weight:900;
}
/*表格样式 */
/deep/ .el-table {
  margin-left:10px;
}
/deep/ .el-table th.el-table__cell {
  background-color: aliceblue;
}
/*模糊搜索表单右移5px，对齐全局按钮和数据table*/
/deep/.c-panel .el-form{
	margin-left:-5px
}
/*按钮与表格的对齐间距等等 */
.firstBtn{
  padding-left:10px;
  padding-right:5px;
  margin-bottom: 5px;
}
.btn{
  padding-right:5px;
  margin-bottom: 5px;
}
/*分页左移10px */
.page-box{
	margin-left: 10px;
}
</style>